<template>
  <div class="pie" id="charts-cloud"></div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud';

const color = [
    '#5DA2F4',
    '#37C7E6',
    '#F930CC',
    '#F98830',
    '#F930CC',
    '#6AD194',
    '#6A93D1'
];

export default {
  name: 'Pie',
  props: {
    data: {
      type: Array,
      default: () => {
        return [
          // {
          //   name: '台风',
          //   value: 10
          // },
          // {
          //   name: '烟花',
          //   value: 60
          // },
          // {
          //   name: '暴雨',
          //   value: 20
          // },
          // {
          //   name: '地震',
          //   value: 200
          // },
          // {
          //   name: '打雷',
          //   value: 50
          // },
          // {
          //   name: '下雨',
          //   value: 70
          // },
          // {
          //   name: '恐龙风',
          //   value: 80
          // },
          // {
          //   name: '恐龙风',
          //   value: 120
          // },
          // {
          //   name: '洪水',
          //   value: 130
          // },
          // {
          //   name: '台风',
          //   value: 40
          // }
        ];
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const chartDom = document.getElementById('charts-cloud');
      const myChart = echarts.init(chartDom);

      const option = {
        series: [
          {
              type: 'wordCloud',
              gridSize: 20,
              sizeRange: [12, 40],
              rotationRange: [0, 0],
              shape: 'circle',
              width: '300',
              height: '200',
              drawOutOfBound: false,
              animation: true,
              textStyle: {
                color: function() {
                  return color[Math.floor(Math.random() * color.length) - 1];
                }
              },
              // emphasis: {
              //     textStyle: {
              //       shadowBlur: 10,
              //       shadowColor: '#333'
              //     }
              // },
              data: this.data
          }
        ]
      };

      option && myChart.setOption(option);
    });
  }
};
</script>

<style scoped>
  .pie {
    height: inherit;
  }
</style>
